<template>
    <div class="individualization-box hw-flex-style-com" hw-flex-style-com>
        <div class="individualization-heard hw-flex-style-c-c">
            <span class="individualization-title1">没有找到合适的模版？</span>
            <span class="individualization-title2">委托个性化策展</span>
        </div>
        <div class="template-bannner">找设计banner</div>
        <p class="individualization-title3">
            个性化案例
        </p>
        <div class="individualization-scroll" id="individualization-scroll">
            <div class="scroll-item" v-for="item in 12" :key="item">
                <img src="http://101.34.143.36:8890/api/image/387939155165253/h_254,w_380" alt="">
                <div class="item-content hw-text-ov-clli">
                    商周青铜器艺术展商周青铜器商周青铜器器商周青铜器艺
                </div>
                <div class="item-btm hw-flex-style-b-c">
                    <div class="btm-left hw-box-style-flex">
                        <t-avatar size="24px"> W </t-avatar>
                        <span class="bem-title">湖北省博物馆</span>
                    </div>
                    <span class="time-text">2022-02-02</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onMounted} from "vue"
import { handlemouse } from '@/utils/minxin';
onMounted(() => {
  handlemouse('individualization-scroll');
});
</script>

<style lang="less" scoped>
@import "../index.less";

.individualization-box{
    overflow: hidden;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 30px;
}
.individualization-title1{
    
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 24px;
}
.individualization-title2{

font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #e62b17;
line-height: 24px;
text-decoration:underline
}
.template-bannner{  
    margin-top: 30px;
    
}
.individualization-title3{
    width: 100%;
    text-align: left; 
    font-size: 22px;
font-family: SourceHanSerifCN-Bold, SourceHanSerifCN;
font-weight: bold;
color: #333333;
line-height: 34px; 
margin: 50px 0;
}
.individualization-scroll{ 
    display: flex;
    width: 100%;
    overflow: scroll;
}
.scroll-item{
    display: flex;
    flex-direction: column;
    width: 380px;
margin-right: 20px;
img{
    width: 380px;
height: 254px;
border-radius: 8px;
}  
} 
.item-content{ 
width: 100%;
font-size: 18px;
font-family: SourceHanSerifCN-Medium, SourceHanSerifCN; 
font-weight: 500;
color: #333333;
line-height: 28px;
margin-top: 16px;
margin-bottom: 10px; 
}
.item-btm{
align-items: center;
}
.bem-title{
    font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 22px;
margin-left: 6px;
}
.time-text{
font-size: 12px;
font-family: DIN-Regular, DIN;
font-weight: 400;
color: #999999;
line-height: 18px;
}
</style>